<template>
	<view class="df_login">
		<view class="df_head" :style=" {background: 'url('+headImg+')'}">
			
		</view>
		<view class="df_content">
			<view class="df_con_top">
				<text class="top_log">登录</text>
				<text class="top_reg" @click="goToRegisterInfo">还没注册, 立即 <text>注册</text> </text>
			</view>
			<view class="df_con_inp">
				<u-input class="u-input" height="130" v-model="phone" type="text" placeholder="输入手机号" />
				<u-input class="u-input" height="130" v-model="password" type="password" placeholder="输入密码" />
				<text class="for_password" @click="goToForget">忘记密码</text>
			</view>
			<view class="df_con_btn" @click="confirmBtn">
				确认
			</view>
		</view>  
		<view class="df_footer" :style=" {background: 'url('+footerImg+')'}">
			
		</view>
	</view>
</template>

<script>
	import {checkPhone} from '../../utils/utils.js'
	export default {
		data() {
			return {
				headImg: 'https://community.chuangxiangdianli.com/images/loginImg/login_bg_one.png',
				footerImg: 'https://community.chuangxiangdianli.com/images/loginImg/login_bg_two.png',
				phone: '',
				password: ''
			};
		},
		methods:{
			confirmBtn(){    
				if(!this.phone){ 
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none',
						duration: 1000
					})
					return false
				} 
				if (!checkPhone(this.phone)){
					uni.showToast({
						title: '手机号格式错误',
						icon: 'none',
						duration: 1000
					})
					return false
				} 
				if(!this.password){
					uni.showToast({
						title: '密码不能为空',
						icon: 'none',
						duration: 1000
					})
					return false
				}
				console.log('请求数据')
			},
			// 前往注册页面
			goToRegisterInfo(){
				uni.navigateTo({
					url: '/login/registerinfo/index'
				})
			},
			// 前往忘记密码页面
			goToForget(){
				uni.navigateTo({
					url: '/login/forgetpassword/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.df_login{
		height: 100vh;
		.df_head{
			width: 100%;
			height: 293rpx;      
		}
		.df_content{
			padding: 0 58rpx;
			height: calc(100% - 293rpx); 
			.df_con_top{
				height: 200rpx;
				line-height: 80rpx;
				.top_log{
					position: relative;
					display: block;
					font-size: 60rpx;
					color: #333;
					font-weight: 700; 
					& ::after{
						position: absolute;
						bottom: -10rpx;
						left: 0;
						content: '';
						height: 10rpx;
						width: 125rpx;
						background-color: #70dac4;
						
					}
				}
				.top_reg{
					font-size: 30rpx;
					color: #999;
					text:nth-child(1){
						color: #68d7c0;
						font-size: 38rpx;
					}
				}
			}
			.df_con_inp{
				height: 440rpx;
				.u-input{   
					display: flex;
					border-bottom: 1px solid #eaeaea;
					&>input{
						font-size: 34rpx;  
					}
				} 
				.for_password{
					margin-top: 60rpx;
					float: right;
					font-size: 32rpx;
					color: #47c8ac;
				}
			}
			.df_con_btn{
				height: 90rpx;
				line-height: 90rpx;
				width: 100%; 
				text-align: center;
				color: #fff;
				font-size: 34rpx;
				font-weight: 500;
				background: linear-gradient(-74deg, #70DAC4, #3EC4A7);
				box-shadow: 0px 5rpx 12rpx 1rpx rgba(68, 198, 170, 0.3);
				border-radius: 45rpx;
			}
		}
		.df_footer{
			position: absolute;
			bottom: 0;
			width: 534rpx;
			height: 426rpx; 
		}
	}
</style>
